<template>
  <div>
    <a-tabs size="small" defaultActiveKey="flow-attr" :activeKey="activeKey">
      <a-tab-pane key="flow-attr">
        <span slot="tab">
          <a-icon type="cluster" />
          流程属性
        </span>
        <a-form layout="horizontal">
          <a-form-item
            label="流程id"
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
          >
            <a-input :value="flowData.attr.id" disabled />
          </a-form-item>
        </a-form>
        <a-form layout="horizontal">
          <a-form-item
            label="存储id"
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
          >
            <a-input :value="flowData.attr.persistId" disabled />
          </a-form-item>
        </a-form>
        <a-form layout="horizontal">
          <a-form-item
            display="none"
            label="流程名称"
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
          >
            <a-input v-model="flowData.attr.name"/>
          </a-form-item>
          <ProcessConfig v-model="flowData.attr.customProcess"></ProcessConfig>
        </a-form>
      </a-tab-pane>
      <a-tab-pane key="node-attr">
        <span slot="tab">
          <a-icon type="profile" />
          节点属性
        </span>
        <template v-if="currentSelect.type == 'start'">
          <a-form layout="horizontal">
            <a-form-item
              label="类型"
              :label-col="formItemLayout.labelCol"
              :wrapper-col="formItemLayout.wrapperCol"
            >
              <a-tag color="purple">开始事件</a-tag>
            </a-form-item>
            <a-form-item
              label="id"
              :label-col="formItemLayout.labelCol"
              :wrapper-col="formItemLayout.wrapperCol"
            >
              <a-input :value="currentSelect.id" disabled />
            </a-form-item>
            <a-form-item
              label="名称"
              :label-col="formItemLayout.labelCol"
              :wrapper-col="formItemLayout.wrapperCol"
            >
              <a-input
                placeholder="请输入节点名称"
                :value="currentSelect.nodeName"
                @change="nodeNameChange"
              />
            </a-form-item>
            <StartNodeConfig v-model="currentSelect.customStartNode"></StartNodeConfig>
            <NodeListenerConfig v-model="currentSelect.listenerConfigs" host-type="node"></NodeListenerConfig>
          </a-form>
        </template>
        <template v-if="currentSelect.type == 'end'">
          <a-form layout="horizontal">
            <a-form-item
              label="类型"
              :label-col="formItemLayout.labelCol"
              :wrapper-col="formItemLayout.wrapperCol"
            >
              <a-tag color="purple">结束事件</a-tag>
            </a-form-item>
            <a-form-item
              label="id"
              :label-col="formItemLayout.labelCol"
              :wrapper-col="formItemLayout.wrapperCol"
            >
              <a-input :value="currentSelect.id" disabled />
            </a-form-item>
            <a-form-item
              label="名称"
              :label-col="formItemLayout.labelCol"
              :wrapper-col="formItemLayout.wrapperCol"
            >
              <a-input
                placeholder="请输入节点名称"
                :value="currentSelect.nodeName"
                @change="nodeNameChange"
              />
            </a-form-item>
          </a-form>
        </template>
        <template v-if="currentSelect.type == 'common'">
          <a-form layout="horizontal">
            <a-form-item
              label="类型"
              :label-col="formItemLayout.labelCol"
              :wrapper-col="formItemLayout.wrapperCol"
            >
              <a-tag color="purple">人工节点</a-tag>
            </a-form-item>
            <a-form-item
              label="id"
              :label-col="formItemLayout.labelCol"
              :wrapper-col="formItemLayout.wrapperCol"
            >
              <a-input :value="currentSelect.id" disabled />
            </a-form-item>
            <a-form-item
              label="名称"
              :label-col="formItemLayout.labelCol"
              :wrapper-col="formItemLayout.wrapperCol"
            >
              <a-input
                placeholder="请输入节点名称"
                :value="currentSelect.nodeName"
                @change="nodeNameChange"
              />
            </a-form-item>
            <UserNodeConfig v-model="currentSelect.customUserNode"></UserNodeConfig>
            <NodeListenerConfig v-model="currentSelect.listenerConfigs" host-type="node"></NodeListenerConfig>
          </a-form>
        </template>
        <template v-else-if="currentSelect.type == 'freedom'">
          <a-form layout="horizontal">
            <a-form-item
              label="类型"
              :label-col="formItemLayout.labelCol"
              :wrapper-col="formItemLayout.wrapperCol"
            >
              <a-tag color="purple">自动节点</a-tag>
            </a-form-item>
            <a-form-item
              label="id"
              :label-col="formItemLayout.labelCol"
              :wrapper-col="formItemLayout.wrapperCol"
            >
              <a-input :value="currentSelect.id" disabled />
            </a-form-item>
            <a-form-item
              label="名称"
              :label-col="formItemLayout.labelCol"
              :wrapper-col="formItemLayout.wrapperCol"
            >
              <a-input
                placeholder="请输入节点名称"
                :value="currentSelect.nodeName"
                @change="nodeNameChange"
              />
            </a-form-item>
            <ServiceNodeConfig v-model="currentSelect.customServiceNode"></ServiceNodeConfig>
          </a-form>
        </template>
        <template v-else-if="currentSelect.type == 'event'">
          <a-form layout="horizontal">
            <a-form-item
              label="类型"
              :label-col="formItemLayout.labelCol"
              :wrapper-col="formItemLayout.wrapperCol"
            >
              <a-tag color="purple">事件节点</a-tag>
            </a-form-item>
            <a-form-item
              label="id"
              :label-col="formItemLayout.labelCol"
              :wrapper-col="formItemLayout.wrapperCol"
            >
              <a-input :value="currentSelect.id" disabled />
            </a-form-item>
            <a-form-item
              label="名称"
              :label-col="formItemLayout.labelCol"
              :wrapper-col="formItemLayout.wrapperCol"
            >
              <a-input
                placeholder="请输入节点名称"
                :value="currentSelect.nodeName"
                @change="nodeNameChange"
              />
            </a-form-item>
          </a-form>
        </template>
        <template v-else-if="currentSelect.type == 'gateway'">
          <a-form layout="horizontal">
            <a-form-item
              label="类型"
              :label-col="formItemLayout.labelCol"
              :wrapper-col="formItemLayout.wrapperCol"
            >
              <a-tag color="purple">{{ currentSelect.type }}</a-tag>
            </a-form-item>
            <a-form-item
              label="id"
              :label-col="formItemLayout.labelCol"
              :wrapper-col="formItemLayout.wrapperCol"
            >
              <a-input :value="currentSelect.id" disabled />
            </a-form-item>
            <a-form-item
              label="名称"
              :label-col="formItemLayout.labelCol"
              :wrapper-col="formItemLayout.wrapperCol"
            >
              <a-input
                placeholder="请输入节点名称"
                :value="currentSelect.nodeName"
                @change="nodeNameChange"
              />
            </a-form-item>
          </a-form>
        </template>
        <template v-else-if="currentSelect.type == 'child-flow'">
          <a-form layout="horizontal">
            <a-form-item
              label="类型"
              :label-col="formItemLayout.labelCol"
              :wrapper-col="formItemLayout.wrapperCol"
            >
              <a-tag color="purple">{{ currentSelect.type }}</a-tag>
            </a-form-item>
            <a-form-item
              label="id"
              :label-col="formItemLayout.labelCol"
              :wrapper-col="formItemLayout.wrapperCol"
            >
              <a-input :value="currentSelect.id" disabled />
            </a-form-item>
            <a-form-item
              label="名称"
              :label-col="formItemLayout.labelCol"
              :wrapper-col="formItemLayout.wrapperCol"
            >
              <a-input
                placeholder="请输入节点名称"
                :value="currentSelect.nodeName"
                @change="nodeNameChange"
              />
            </a-form-item>
          </a-form>
        </template>
        <template
          v-else-if="
            currentSelect.type == 'x-lane' || currentSelect.type == 'y-lane'
          "
        >
          <a-form layout="horizontal">
            <a-form-item
              label="类型"
              :label-col="formItemLayout.labelCol"
              :wrapper-col="formItemLayout.wrapperCol"
            >
              <a-tag color="purple">{{ currentSelect.type }}</a-tag>
            </a-form-item>
            <a-form-item
              label="id"
              :label-col="formItemLayout.labelCol"
              :wrapper-col="formItemLayout.wrapperCol"
            >
              <a-input :value="currentSelect.id" disabled />
            </a-form-item>
            <a-form-item
              label="名称"
              :label-col="formItemLayout.labelCol"
              :wrapper-col="formItemLayout.wrapperCol"
            >
              <a-input
                placeholder="请输入节点名称"
                :value="currentSelect.nodeName"
                @change="nodeNameChange"
              />
            </a-form-item>
          </a-form>
        </template>
      </a-tab-pane>
      <a-tab-pane key="link-attr">
        <span slot="tab">
          <a-icon type="branches" />
          连线属性
        </span>
        <a-form layout="horizontal">
          <a-form-item
            label="id"
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
          >
            <a-input :value="currentSelect.id" disabled />
          </a-form-item>
          <a-form-item
            label="源节点"
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
          >
            <a-input :value="currentSelect.sourceId" disabled />
          </a-form-item>
          <a-form-item
            label="目标节点"
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
          >
            <a-input :value="currentSelect.targetId" disabled />
          </a-form-item>
          <a-form-item
            label="文本"
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol"
          >
            <a-input :value="currentSelect.label" @change="linkLabelChange" />
          </a-form-item>
          <SequenceFlowConfig v-model="currentSelect.customSequenceFlow"></SequenceFlowConfig>
          <NodeListenerConfig v-model="currentSelect.listenerConfigs" host-type="sequence"></NodeListenerConfig>
        </a-form>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<script>
import jsplumb from 'jsplumb'
import ProcessConfig from '../../../views/workflow/process/flowDesingerCustom/ProcessConfig'
import StartNodeConfig from '../../../views/workflow/process/flowDesingerCustom/StartNodeConfig'
import UserNodeConfig from '../../../views/workflow/process/flowDesingerCustom/UserNodeConfig'
import ServiceNodeConfig from '../../../views/workflow/process/flowDesingerCustom/ServiceNodeConfig'
import SequenceFlowConfig from "../../../views/workflow/process/flowDesingerCustom/SequenceFlowConfig"
import NodeListenerConfig from "../../../views/workflow/process/flowDesingerCustom/NodeListenerConfig"

export default {
  props: ['plumb', 'flowData', 'select'],
  components: {
    jsplumb,
    ProcessConfig,
    StartNodeConfig,
    UserNodeConfig,
    ServiceNodeConfig,
    SequenceFlowConfig,
    NodeListenerConfig
  },
  data () {
    return {
      currentSelect: this.select,
      formItemLayout: {
        labelCol: { span: 6 },
        wrapperCol: { span: 16 }
      },
      activeKey: 'flow-attr'
    }
  },
  methods: {
    nodeNameChange (e) {
      this.currentSelect.nodeName = e.target.value
    },
    linkLabelChange (e) {
      const that = this
      let label = e.target.value
      that.currentSelect.label = label
      // 获取全部连线
      let allEle = this.plumb.getAllConnections()
      allEle.forEach((element, i) => {
        this.flowData.linkList.forEach((j, k) => {
          if (i === k) {
            if (label !== '') {
              element.setLabel({
                label: j.label,
                cssClass: 'linkLabel'
              })
            } else {
              let labelOverlay = element.getLabelOverlay()
              if (labelOverlay) element.removeOverlay(labelOverlay.id)
            }
          }
        })
      })
    }
  },
  watch: {
    select (val) {
      this.currentSelect = val
      if (this.currentSelect.type === 'link') {
        this.activeKey = 'link-attr'
      } else if (!this.currentSelect.type) {
        this.activeKey = 'flow-attr'
      } else {
        this.activeKey = 'node-attr'
      }
    },
    currentSelect: {
      handler (val) {
        this.$emit('update:select', val)
      },
      deep: true
    }
  }
}
</script>

<style lang="less" scoped>
.ant-form-item {
    margin-bottom: 6px;
}
</style>
